<!--
 * @description: 
 * @Author: FengKongLi
 * @Date: 2022-07-26 15:09:04
 * @LastEditors: FengKongLi
 * @LastEditTime: 2022-08-05 14:34:12
-->
<template>
  <div class="addGeojson">
    <div id="cesiumContainer"></div>
    <div class="list">
      <ul>
        <li @click="addChinaLayerData">加载中国区域图层</li>
        <li @click="addUSBLayerData">加载美国区域图层</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "AddGeojson",
  data() {
    return {
      viewer: "",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3NTRlZTllYi0zMjQ3LTRjYzItOGViOS1kYmVjNjAyOTA5ODEiLCJpZCI6OTk0NTAsImlhdCI6MTY1NjQ5NTE4Nn0.BeOLKnxflcj0ztuG4RYdvR8xbXGV7cfEZQWq8Hu7Epw";
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, //是否显示动画控件
        timeline: false, //是否显示时间线控件
        // fullscreenButton: false, //全屏按钮
        // sceneModePicker: false, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        shouldAnimate: true,
        // infoBox: true,
      });
      //   去掉版权信息
      this.viewer._cesiumWidget._creditContainer.style.display = "none";
    },
    addChinaLayerData() {
      let viewer = this.viewer;
      // 添加全国区域
      var geojsonOptions = {
        clampToGround: true,
      };

      var neighborhoodsPromise = Cesium.GeoJsonDataSource.load(
        "./data/data-city.json",
        geojsonOptions
      );
      let neighborhoods;
      neighborhoodsPromise.then(function (dataSource) {
        viewer.dataSources.add(dataSource);
        neighborhoods = dataSource.entities;

        // 获取enity列表遍历
        var neighborhoodEntities = dataSource.entities.values;

        for (var i = 0; i < neighborhoodEntities.length; i++) {
          var entity = neighborhoodEntities[i];

          if (Cesium.defined(entity.polygon)) {
            // 设置每个entity的name属性和行政区的名称相同
            // entity.name = entity.properties.name;

            entity.polygon.material = Cesium.Color.fromRandom({
              // 通过ColorMaterialProperty设置随机颜色Color，而不是把所有的区域都设置成一样的颜色。
              red: 0.1,
              maximumGreen: 0.5,
              minimumBlue: 0.5,
              alpha: 0.6,
            });
          }
          var polyPositions = entity.polygon.hierarchy.getValue(
            Cesium.JulianDate.now()
          ).positions;
          var polyCenter =
            Cesium.BoundingSphere.fromPoints(polyPositions).center;
          polyCenter =
            Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
          entity.position = polyCenter;
          // Generate labels
          entity.label = {
            text: entity.name,
            showBackground: true, // 文字后是否显示背景
            // fillColor:Cesium.Color.BLACK,      // 字体颜色
            // backgroundColor:Cesium.Color.AQUA, // 背景颜色
            scale: 0.4,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            // distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 8000.0),
            // disableDepthTestDistance : Number.POSITIVE_INFINITY
          };
        }
      });
    },
    addUSBLayerData() {
      this.viewer.dataSources.add(
        Cesium.GeoJsonDataSource.load(
          "./data/geojson/ne_10m_us_states.topojson"
        )
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.addGeojson {
  position: relative;
  #cesiumContainer {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0px;
    overflow: hidden;
  }
  .list {
    position: absolute;
    top: 1rem;
    ul {
      color: rgb(248, 240, 92);
      li {
        background: rgb(144, 213, 248);
        margin: 0.3rem;
        padding: 0.5rem;
      }
    }
  }
}
</style>
